<template>
  <!-- 编辑弹出框 -->
  <el-dialog title="电影编辑" width="600px" :visible.sync="visible" @close="$emit('close')">

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="add-form">

      <el-form-item label="电影名称" prop="nm">
        <el-input v-model="ruleForm.nm"></el-input>
      </el-form-item>

      <el-form-item label="Logo">
        <el-upload class="upload" :before-upload="beforeUpload" :file-list="fileList" :on-remove="removeFile">
          <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item label="版本">
        <el-checkbox-group v-model="ruleForm.version">
          <el-checkbox label="3d" name="3d">3D</el-checkbox>
          <el-checkbox label="imax" name="imax">IMAX</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="上映城市">
        <el-col :span="11">
          <el-form-item prop="cityId">
            <el-cascader size="small" :options="options" v-model="selectedOptions" :props="{ checkStrictly: true }" clearable @change="handleChange">
            </el-cascader>
          </el-form-item>
        </el-col>

        <el-col :span="13">
          <el-form-item label="上映时间">
            <el-date-picker style="width: 100%;" type="date" placeholder="选择日期" v-model="ruleForm.showTime"
             vue-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="发布频道">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="1" name="1">正在热映</el-checkbox>
          <el-checkbox label="2" name="2">经典电影</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="主演">
        <el-input v-model="ruleForm.star"></el-input>
      </el-form-item>
      <el-form-item label="观众评">
        <el-col :span="7">
          <el-input-number v-model="ruleForm.sc" :min="1" :max="10"></el-input-number>
        </el-col>
        <el-col class="line" :span="5">
          期待观影
        </el-col>
        <el-col :span="7">
          <el-input width="30" v-model="ruleForm.wish"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="ruleForm.showInfo"></el-input>
      </el-form-item>

      <el-form-item label="上映" prop="delivery">
        <el-switch v-model="ruleForm.globalReleased"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即更新</el-button>
        <el-button @click="$emit('close')">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { regionData, CodeToText } from "element-china-area-data"
import { update } from "@/api/movies"
export default {
  props: ["visible", "items"],
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      fileList: [],
      ruleForm: {
        //电影名称
        nm: "",
        //电影的海报
        img: null,
        //版本类型
        version: [],
        //城市id
        cityId: "",
        cityName: "",
        //发布频道
        type: [],
        //主演
        star: "",
        //观众评
        sc: 0,
        //期待上映人数
        wish: 0,
        showInfo: "",
        //上映(是否正式上映以此字段为准)
        globalReleased: false,
        //（计划）上映时间
        showTime: null
      },
      rules: {
        nm: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        cityId: [
          { required: true, message: "请选择上映城市", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      }
    }
  },
  created() {
    console.log("items:", this.items)
    this.ruleForm = Object.assign({}, this.items)
    this.selectedOptions = this.ruleForm.cityId.split(",")
    this.ruleForm.version = this.items.version.split(',')
    this.ruleForm.type = this.items.type.split(',')
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.fd = new FormData()
          for (let key in this.ruleForm) {
            this.fd.append(key, this.ruleForm[key])
          }
          let rs = await update(this.fd)
          if (rs.code === 1) {
            this.$message({
              showClose: true,
              type: "success",
              message: "更新成功"
            })
            this.$emit("updateSuccess")
          } else {
            this.$message({
              showClose: true,
              type: "warning",
              message: "更新失败"
            })
          }
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleChange() {
      console.log(this.selectedOptions)
      this.ruleForm.cityId = this.selectedOptions[
        this.selectedOptions.length - 1
      ]
    },
    beforeUpload(file) {
      this.ruleForm.img = file
      this.fileList.push({
        name: file.name,
        url:
          "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
      })
    },
    removeFile() {
      this.ruleForm.img = null
    }
  }
}
</script>

<style lang="scss">
.add-form .line {
  text-align: right;
  margin-right: 5px;
}
.upload {
  display: flex;
}
.el-dialog__body {
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>


